<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../css/H5.css">
        <link rel="stylesheet" href="../css/H5ComponentBase.css">
        <script type="text/javascript" src="../js/lib/jquery.js"></script>

        <script type="text/javascript" src="../js/lib/jquery-ui.min.js"></script>
        <script type="text/javascript" src="../js/lib/jquery.fullPage.js"></script>
        <script type="text/javascript" src="../js/H5ComponentBase.js"></script>
        <script type="text/javascript" src="../js/H5.js"></script>
        <style>
        body{
            margin: 0;
            padding: 0;
        }
        </style>
    </head>
    <body>
    <script type="text/javascript">
        $(function(){
            var h5 = new H5();

                h5
                .addPage('face')
                    .addComponent('logo',{
                        text:'logo',
                        width:400,
                        height:100,
                        css:{backgroundColor:'red',top:200,opacity:0},
                        center:true,
                        animateIn:{opacity:1},
                        animateOut:{opacity:0}
                    })
                    .addComponent('slogn',{
                        text:'slogn',
                        width:400,
                        height:100,
                        css:{backgroundColor:'red',top:350},
                        center:true
                    })
                .addPage('desc')
                    .addComponent('caption',{
                        text:'核心理念',
                        width:400,
                        height:100,
                        css:{backgroundColor:'green',top:200},
                        center:true
                    })
                .addPage('page-3')
                    .addComponent('caption',{text:'课程方向分布'})
                .loader();
        })
    </script>
    </body>
</html>